<template>
  <div class="trackCycling">
    <div class="shadow sd-one"></div>
    <div class="shadow sd-two"></div>
    <div class="record">
      <div id="map"></div>
      <div class="details">
        <ul>
          <li>
            <p>骑行时长</p>
            <p class="f-color"><span>37</span>分钟</p>
          </li>
          <li>
            <p>行程花费</p>
            <p class="f-color"><span>2.0</span>元</p>
          </li>
        </ul>
        <div class="bikeNum">
          No.7755000011
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const google = window.google
export default {
  data () {
    return {
      user_id: '',
      order_id: '',
      map: null,
      marker: null,
      zoom: 15,
      flightPath: null,
      center: {lat: 39.908520, lng: 116.397492},
      image: [
        {
          url: '../../../static/start.png',
          scaledSize: new google.maps.Size(25, 40),
          anchor: new google.maps.Point(13, 35)
        },
        {
          url: '../../../static/end.png',
          scaledSize: new google.maps.Size(25, 40),
          anchor: new google.maps.Point(13, 35)
        }
      ],
      bikepath: [],
      position: []
    }
  },
  mounted () {
    this.getTheApp()
    this.initMap()
  },
  methods: {
    getTheApp: function () {
      this.order_id = this.$route.query.order_id
      this.user_id = this.$route.query.user_id
      this.getTrackPath()
    },
    getTrackPath: function () {
      // let Url = '/v1/order/' + this.order_id + '/' + this.user_id + '/track'
      let Url = 'http://gobike.test.cmmkj.top/v1/order/' + this.order_id + '/' + this.user_id + '/track'
      this.$api.get(Url).then((res) => {
        console.log(res)
        this.bikepath = JSON.parse(res)
      }).catch(() => {
        this.$message.error('轨迹加载失败')
      })
    },
    initMap: function () {
      this.addposition()
      this.setCenter()
      this.map = new google.maps.Map(document.getElementById('map'), {
        zoom: this.zoom,
        center: this.center,
        disableDefaultUI: true
      })
      for (var i = 0; i < this.position.length; i++) {
        this.marker = new google.maps.Marker({
          position: this.position[i],
          label: '',
          map: this.map,
          icon: this.image[i]
        })
      }
      this.flightPath = new google.maps.Polyline({
        map: this.map,
        path: this.bikepath,
        geodesic: true,
        strokeColor: '#35A5FE',
        strokeOpacity: 1,
        strokeWeight: 3
      })
    },
    addposition: function () {
      let len = this.bikepath.length
      this.position.push(this.bikepath[0], this.bikepath[len - 1])
    },
    setCenter: function () {
      let maxlat = 0
      let minlat = this.bikepath[0].lat
      let maxlng = 0
      let minlng = this.bikepath[0].lng
      this.bikepath.map((n, i) => {
        n.lat > maxlat ? maxlat = n.lat : null
        n.lat < minlat ? minlat = n.lat : null
        n.lng > maxlng ? maxlng = n.lng : null
        n.lng < minlng ? minlng = n.lng : null
      })
      let latValue = (maxlat - minlat) / 2
      let lngValue = (maxlng - minlng) / 2
      this.center.lat = minlat + latValue
      this.center.lng = minlng + lngValue
      this.changeZoom(latValue, lngValue)
    },
    changeZoom: function (latValue, lngValue) {
      let latzoom = Math.floor(latValue / 0.0059)
      let lngzoom = Math.floor(lngValue / 0.0069)
      // console.log(latValue)
      latValue < lngValue ? this.zoom = 15 - lngzoom : this.zoom = 15 - latzoom
      this.zoom < 12 ? this.zoom = 12 : null   // 最低缩放到12
    }
  }
}
</script>

<style>
.trackCycling {
  width: 100vw;
  height: 100vh;
  background: -webkit-linear-gradient(right top, #6AD9EF ,  #01D7C8); /* Safari 5.1 - 6.0 */
  background: linear-gradient(to bottom left, #6AD9EF ,  #01D7C8); /* 标准的语法 */
  position: relative;
  display: flex;
  justify-content: center;
}
.shadow {
  height: 1.97rem;
  border-radius: .1rem;
  background-color: #fff;
  position: absolute;
}
.sd-one {
  width: 5.92rem;
  opacity: .2;
  top: .66rem;
}
.sd-two {
  width: 6.4rem;
  opacity: .5;
  top: .86rem;
}
.record {
  width: 6.9rem;
  height: 10.12rem;
  border-radius: .14rem .14rem 0 0;
  margin-top: 1.02rem;
  background-color: #fff;
  z-index: 100; 
  position: relative;
}
#map {
  width: 6.9rem;
  height: 6.46rem;
  border-radius: .14rem .14rem 0 0;
}
.details {
  position: absolute;
  bottom: 0rem;
  height: 4.14rem;
  background-color: #fff;
}
ul {
  height: 3.02rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
li {
  float: left;
  width: 3.45rem;
  text-align: center;
}
li p {
  font-size: .28rem;
  line-height: .7rem;
  color: #333333;
}
.f-color {
  color: #01D7C8;
}
.f-color span {
  font-size: .6rem;
}
.bikeNum {
  width: 6.3rem;
  height: 1.12rem;
  margin: 0 auto;
  font-size: .3rem;
  line-height: 1.12rem;
  text-align: center;
  color: #333333;
  border-top: 1px solid #E5E5E5
}
</style>

